<template>
  <el-dialog
    class="dialog"
    :visible.sync="visible"
    :before-close="handleClose"
    width="30%"
  >
    <div slot="title" class="dialog-title">
      <el-divider content-position="left">{{ title }}</el-divider>
      <div class="description">{{ description }}</div>
      <el-divider></el-divider>
    </div>
    <div class="dialog-body">
      <div class="param-item" v-for="(param, index) in initParams" :key="index">
        <label class="param-item-label">{{ param.paramName }}</label>
        <el-input
          class="param-item-input"
          v-if="param.display.type === 'input'"
          v-model.number="param.paramRes"
        ></el-input>
        <el-select
          class="param-item-input"
          v-if="param.display.type === 'select'"
          v-model="param.paramRes"
          :placeholder="`请选择${param.paramName}`"
        >
          <el-option
            v-for="option in param.display.options"
            :key="option.value"
            :label="option.label"
            :value="option.value"
          ></el-option>
        </el-select>
      </div>
    </div>
    <!-- <div slot="footer" class="dialog-footer">
      <el-button @click="handleCancel">取 消</el-button>
      <el-button type="primary" @click="handleConfirm">确 定</el-button>
    </div> -->
  </el-dialog>
</template>

<script>
export default {
  name: "props-dialog",
  props: {
    node: {
      type: Object,
    },
    visible: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    title() {
      return this.node.name;
    },
    description() {
      return this.node.description;
    },
    initParams() {
      return this.node.initParams;
    },
  },
  methods: {
    handleCancel() {
      this.$emit("cancel");
    },
    handleConfirm() {
      this.$emit("confirm");
    },
    handleClose() {
      this.handleCancel();
    },
  },
};
</script>

<style lang="less">
// .dialog {
//   .el-dialog {
//     margin-top: 30vh !important;
//   }
// }
.dialog-body {
  margin-left: 40px;

  .param-item {
    width: 460px;
    height: 40px;
    margin-bottom: 22px;

    .param-item-label {
      display: inline-block;
      width: 80px;
      height: 40px;
      padding: 0 12px 0 0;
      font-size: 14px;
      line-height: 40px;
      color: #606266;
    }

    .param-item-input {
      display: inline-block;
      width: 380px;
      height: 40px;
    }
  }
}

.dialog-footer {
  display: flex;
  justify-content: space-evenly;
}
</style>
